<template>
  <div>
    <!--  扫码枪扫码信息弹出框  -->
    <el-dialog title="扫描条码" :visible.sync="scanVisible" width="500px" append-to-body :close-on-click-modal="false" @close="barCode=''">
      <div v-loading="payLoading">
        <div style="width: 300px;height: 300px;margin: 0 auto;">
          <el-image :src="scanGif" style="width: 100%;height: 100%;"></el-image>
        </div>
        <el-input v-model="barCode" placeholder="请扫描条码信息" ref="scanFocus" style="opacity: 0;" @keyup.enter.native="handleSubmitPay"></el-input>
      </div>
    </el-dialog>
    <!--  生成二动态维码支付  -->
    <el-dialog title="扫码支付" :visible.sync="qrcodeVisible" width="500px" :close-on-click-modal="false" append-to-body @close="qrCodeCancel">
      <div style="text-align: center;">
        <div style="margin-bottom: 10px;">
          <span style="display: block;">
            使用<span style="color: #ffba00">微信</span>或<span style="color: #ffba00">支付宝</span>扫描二维码进行付款
          </span>
          <div>
            <span style="font-size: 28px;font-weight: 400;color: #333333">￥<span v-text="paymentForm.amount"></span></span>
          </div>
        </div>
        <!--  二维码生成插件      -->
        <qr-generate ref="qrGenerate"></qr-generate>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import scanGif from '@/assets/images/scan.gif'
import { qrcodePayment, scanPayment } from '@/api/cost/payment'
import { getToken } from "@/utils/auth";

import Cookies from 'js-cookie';
export default {
  name: 'index',
  data() {
    return {
      scanVisible: false,
      qrcodeVisible: false,
      scanGif: scanGif,
      payLoading: false,
      paymentForm: {
        billNumber: '',
        billType: '',
        amount: ''
      },
      barCode: '',
      // socketUrl: 'ws://192.168.0.101:8080/webSocket'
      // socketUrl: 'ws://121.36.74.128:8080/webSocket'
      // socketUrl: 'wss://120.46.132.102/webSocket'
      socketUrl: 'wss://oms.hkeport.cn/webSocket'
    }
  },
  mounted() {},
  methods: {
    // 扫码设备方式弹框处理
    showPassive(data) {
      this.paymentForm.billNumber = data.billNumber
      this.paymentForm.billType = data.billType
      this.paymentForm.amount = data.amount
      this.scanVisible = true
      this.$nextTick(() => {
        this.$refs.scanFocus.focus()
      })
    },
    // 生成二维码方式弹框处理
    showInitiative(data) {
      this.paymentForm.billNumber = data.billNumber
      this.paymentForm.billType = data.billType
      this.paymentForm.amount = data.amount
      this.handleGainQrCode()
      this.$nextTick(() => {
        this.handleSendSocket()
      })
    },
    handleConfirmInitiativePay() {
      this.qrCodeCancel()
      this.$emit('initiativePayAfter')
    },
    handleGainQrCode() {
      qrcodePayment(this.paymentForm).then(res => {
        if(res.data) {
          if(res.data == "100") {
            this.$modal.msgError('所选收费单已被支付过了。');
            return false;
          }else if(res.data.startsWith("101_")){
            let cid = res.data.split("101_");
            this.$modal.msgError('所选收费单'+cid[1]+'正在支付中。。。请3分钟后重试');
            return false;
          }else{
            this.qrcodeVisible = true
            this.$nextTick(() => {
              this.$refs.qrGenerate.initQrCode(res.data)
            })
          }
        } else {
          this.$modal.msgError('二维码生成失败，请重试');
        }
      })
    },
    qrCodeCancel() {
      this.$refs.qrGenerate.clearQrCode()
      this.qrcodeVisible = false
    },
    handleSubmitPay() {
      if(this.barCode) {
        this.payLoading = true
        const obj = {
          barCode: this.barCode
        }
        Object.assign(obj, this.paymentForm)
        scanPayment(obj).then((res) => {
          if(res.data) {
            this.$emit('passivePayAfter')
            this.$modal.msgSuccess('支付成功')
          }
        })
        this.payLoading = false
        this.scanVisible = false
      } else {
        this.$modal.msgError('请扫描条码信息')
      }
    },
    handleSendSocket() {
      var websocket = null;
      const _this = this
      if('WebSocket' in window) {
        websocket = new WebSocket(this.socketUrl);
      }else {
        alert('该浏览器不支持websocket!');
      }
      websocket.onopen = function (event) {
        console.log('建立连接');
      }
      websocket.onclose = function (event) {
        console.log('连接关闭');
      }
      websocket.onmessage = function (event) {
        let bn = _this.paymentForm.billNumber;
          if(event.data.indexOf("success")!=-1){
            let res = event.data.split('_');
            if(res.length>1){
              let chargeNos = res[1];
              if(chargeNos == bn){
                _this.$modal.msgSuccess('支付成功')
                _this.handleConfirmInitiativePay()
              }
            }
          }
        //所要执行的操作
        // if(event.data == 'success') {
        //   _this.$modal.msgSuccess('支付成功')
        //   _this.handleConfirmInitiativePay()
        // } else {
        //   _this.$modal.msgError('支付失败')
        //   _this.qrCodeCancel()
        // }
      }

      websocket.onerror = function () {
        console.log('websocket通信发生错误！');
      }

      window.onbeforeunload = function () {
        websocket.close();
      }


    }
  }
}
</script>

<style scoped>

</style>
